
<!--
    ===============================地图组件====================================================
        地图组件基础地图展示
-->
<template>
    <div id="map"></div>
</template>
<script>
import store from '../../vuex/store.js';
export default {
    name:'HGCMap',
    data () {
        return {
            msg:'HGCMap',
            map:null,
        }
    },
    store,
    mounted(){
         this.map = new mapboxgl.Map({
            container: 'map', // container id
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "type": "raster",
                        "tileSize": 256,
                        //xyz形式，原生支持
                        "tiles": ['http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}']
                    }
                },

                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                }]
            },
            units:'degree',
            crs:'EPSG:4490',
             center:[128.0200,47.12197],
            zoom: 5
        });
   
        //leaflet的Map对象与其他组件进行通讯
        this.$store.commit('GetMainMap',this.map);
    },
}
</script>

<style>
    #map{
        width:100%;
        height:100%;
    }
</style>

